<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue星空特效</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <style>
        body {
            /* 创建背景图像 */
            background: radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92, #75517d, #1b2947);
            background: radial-gradient(220% 105% at top center, #1b2947 10%, #75517d 40%, #e96f92 65%, #f7f7b6);
            background-attachment: fixed;
            overflow: hidden;
        }

        /* 容器旋转动画 */
        @keyframes rotate {
            0% {
                transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
            }

            100% {
                transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
            }
        }

        /* 容器 */
        .starsbox {
            /* 视距 */
            transform: perspective(500px);
            transform-style: preserve-3d;
            position: absolute;
            bottom: 0;
            /* 观察者的位置 */
            perspective-origin: 50% 100%;
            left: 50%;
            animation: rotate 90s infinite linear;
        }

        .star {
            width: 2px;
            height: 2px;
            background: #F7F7B6;
            position: absolute;
            top: 0;
            left: 0;
            /* 隐藏旋转 div 元素的背面 */
            backface-visibility: hidden;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="starsbox">
            <div class="star" ref="star" v-for="(item,index) in starsCount" :key="index"></div>
        </div>
    </div>

    <script>
        const app = new Vue({
            el: "#app",
            data: {
                starsCount: 800, // 数量
                distance: 800 // 距离
            },
            mounted() {
                // 原生js
                let domStartList = document.getElementsByClassName("star")
                // 类数组对象转化成数组
                let starArr = Array.prototype.slice.call(domStartList)
                // vue
                let refStarList = this.$refs.star
                // 遍历添加样式
                starArr.forEach(item => {
                    // 原点
                    var s = 0.2 + (Math.random() * 1);
                    // 距离
                    var thisDistance = this.distance + (Math.random() * 300);
                    // 更改转换元素原点位置,就是按照哪一个点旋转
                    item.style.transformOrigin = `0 0 ${thisDistance}px`
                    item.style.transform = `translate3d(0,0,-${thisDistance}px) rotateY(${(Math.random() * 360)}deg) rotateX(${(Math.random() * -50)}deg) scale(${s},${s})`
                })
            }
        })
    </script>
</body>

</html>